﻿@inject MarkdownBlog Blog

<div class="mx-auto grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3">
    @foreach (var post in Posts)
    {
        var authorHref = Blog.GetAuthorLink(post.Author);
        <div class="flex flex-col overflow-hidden rounded-lg shadow-lg">
            <div class="flex-shrink-0">
                <a href="@Blog.GetPostLink(post)">
                    <img class="h-48 w-full object-cover" src="@Blog.GetSplashImage(post)" alt="">
                </a>
            </div>
            <div class="flex flex-1 flex-col justify-between bg-white dark:bg-black p-6">
                <div class="flex-1">
                    <p class="text-sm font-medium text-indigo-600 dark:text-indigo-300">
                        Article
                    </p>
                    <a href="@Blog.GetPostLink(post)" class="mt-2 block">
                        <p class="text-xl font-semibold text-gray-900 dark:text-gray-50 whitespace-nowrap overflow-hidden text-ellipsis" title="@post.Title">
                            @post.Title
                        </p>
                        <p class="mt-3 text-base text-gray-500">@post.Summary</p>
                    </a>
                </div>
                <div class="mt-6 flex items-center">
                    <div class="flex-shrink-0">
                        <a href="">
                            <span class="sr-only">@post.Author</span>
                            <img class="h-10 w-10 rounded-full" src="@Blog.GetAuthorProfileUrl(post.Author)" alt="@post.Title background">
                        </a>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-gray-900">
                            @if (authorHref != null)
                            {
                                <a href="@Blog.GetAuthorLink(post.Author!)" class="hover:underline">@post.Author</a>
                            }
                            else
                            {
                                <span>@post.Author</span>
                            }
                        </p>
                        <div class="flex space-x-1 text-sm text-gray-500">
                            <time datetime="@Blog.GetDateTimestamp(post.Date)">@Blog.GetDateLabel(post.Date)</time>
                            <span class="px-1" aria-hidden="true">&middot;</span>
                            <span>@Blog.MinutesToRead(post.WordCount) min read</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
</div>

@code {
    [Parameter]
    public required List<MarkdownFileInfo> Posts { get; set; }
}
